<template>
  <tbody>
    <tr v-for="item in goodList" :key="item.id" >
    <th><input type="checkbox" :checked="item.checked" @change="changeFn(item.id)"/></th>
    <th>{{item.name}}</th>
    <th>{{item.price}}</th>
    <th>
      <button @click="sub(item.id)">-</button>
      {{item.num}}
      <button @click="sum(item.id)">+</button>
      </th>
    <th>{{item.price * item.num}}</th>
    <th><button @click="delFn(item.id)">删除</button></th>
  </tr>
</tbody>
</template>

<script>
import { mapState } from 'vuex'
export default {
  computed: {
    ...mapState('cart', ['goodList'])
  },

  methods: {
    delFn (id) {
      this.$store.commit('cart/delItem', { id })
    },
    changeFn (id) {
      this.$store.commit('cart/changeChecked', { id }
      )
    },
    sum (id) {
      this.$store.commit('cart/sumCount', { id })
    },
    sub (id) {
      this.$store.commit('cart/subCount', { id })
    }
  }
}
</script>

<style></style>
